<template>
    <el-dialog v-model="open" @close="closeInfo" title="Export Porder" width="78%" align="left"
        style="background-color: #f1f1f1;" draggable>
        <div style="width: 100%;" class='mb-5'>
            <el-date-picker @change="() => { emits('getdate', date) }" v-model="date" style="width: 20%;" type="daterange"
                unlink-panels range-separator="-" start-placeholder="Start date" end-placeholder="End date"
                :shortcuts="shortcuts" size="size" />
        </div>
        <table border="1" style="width: 100%;border-collapse:collapse;" class="exportable" id="exporttable">
            <thead>
                <tr>
                    <td>序号</td>
                    <td class="yincang">PI</td>
                    <td class="yincang">销售</td>
                    <td>产品</td>
                    <td>采购单</td>
                    <td>create_time</td>
                    <td>汇率</td>
                    <td>销售价</td>
                    <td>数量</td>
                    <td>采购价(￥)</td>
                    <td>Total</td>
                    <td>利润(%)</td>
                    <td>采购</td>
                    <td>利润金额</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in exportPurList" :key="index">
                    <td>{{ item.Number }}</td>
                    <td class="yincang">{{ item.PI_name }}</td>
                    <td class="yincang">{{ item.sale }}</td>
                    <td>{{ item.Model }}</td>
                    <td>{{ item.Purchaseordername }}</td>
                    <td>{{ item.create_time.slice(0, 10) }}</td>
                    <td>{{ item.Current_rate }}</td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.Qtynumber }}</td>
                    <td>{{ item.Purchase_price }}</td>
                    <td>{{ item.Total }}</td>
                    <td>{{ item.Profit }}</td>
                    <td>{{ item.purchaser }}</td>
                    <td>{{ item.ProfitMoney.toFixed(2) }}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td class="yincang"></td>
                    <td class="yincang"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>总利润</td>
                    <td>{{ sumProfit }}</td>
                </tr>
            </tfoot>
        </table>
        <a download="purchaseOrder" id="excelOut" href="#" rel="external nofollow"></a>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="exportFun" type="primary"
                    style="border:1px solid #6193D2;color:#ffffff">export</el-button>


                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2"
                    @click="() => { emits('closeEpurWindow') }">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'

const props = defineProps({
    shortcuts: Object,
    exportPurList: Object,
    sumProfit: Number
})
const emits = defineEmits(['closeInfo','getdate', 'closeEpurWindow'])
const open = ref(false)
const date = ref([])
const dialogopen = () => {
    open.value = true
}
const closeInfo = () => {
    date.value = ''
    emits('closeInfo',5)
}
defineExpose(
    {
        open,
        date,
        dialogopen,
    }
)

const exportFun = () => {
    tableToExcel("exporttable", `purchaseOrder`);
    open.value = false
}

//base64转码
const base64 = (s) => {
    return window.btoa(unescape(encodeURIComponent(s)));
}
//替换table数据和worksheet名字
const format = (s, c) => {
    return s.replace(/{(\w+)}/g, (m, p) => {
        return c[p];
    });
}

const tableToExcel = (tableid, sheetName) => {
    var uri = "data:application/vnd.ms-excel;base64,";
    var template = `
    <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
        xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>
        </x:ExcelWorkbook></xml><![endif]-->
         <style type="text/css">
         table{
            font-family:Times New Roman;
         }
        table td {
        width: 120px;
        height: 30px;
        text-align: center;
        }
        </style>
        </head><body ><table class="excelTable">{table}</table></body></html>
    `

    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = {
        worksheet: sheetName || "Worksheet",
        table: tableid.innerHTML,
    };
    const a = document.getElementById("excelOut");
    a.href = uri + base64(format(template, ctx));
    a.click();
}
</script>

<style lang="less" scoped>
.exportable {
    tbody {
        display: block;
        width: calc(100% + 8px);
        /*这里的8px是滚动条的宽度*/
        max-height: 41vh;
        overflow-y: scroll;
        // -webkit-overflow-scrolling: touch;
    }

    .yincang {
        display: none;
    }

    tr {
        height: 50px;
        box-sizing: border-box;
        table-layout: fixed;
        display: table;
        width: 100%;
        border: none
    }

    td {
        text-align: center;
        border: 1px solid black;
    }
}

/* 滚动条宽度 */
::-webkit-scrollbar {
    width: 8px;
}

/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c8eef3;
}


// .el-input__inner {
//     font-family: 'swis';
// }

.el-dialog__title {
    font-weight: bold;
}
</style>